<template>
  <view class="login">
    <view class="top">
      <view class="right">
        <span @click="gotoRegister">注册</span>
      </view>
    </view>
    <view class="logo">
      <uni-icons size="90" type="person" />
      <span>登录</span>
      <span>您好，欢迎来到cc的聊天室</span>
    </view>
    <view class="data">
      <uni-forms ref="valiForm" validateTrigger="bind" :modelValue="info" :rules="UserRules">
        <uni-forms-item required name="users">
          <uni-easyinput trim="all" v-model="info.users" placeholder="请输入用户名/邮箱" />
        </uni-forms-item>
        <uni-forms-item required name="password">
          <uni-easyinput trim="all" v-model="info.password" placeholder="请输入密码" type="password" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">登录</button>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    getCurrentInstance,
    onMounted
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const info = reactive({
    users: '',
    password: '',
    token: null
  })
  import {
    useUserStore
  } from '@/store/user.js'
  const instance = getCurrentInstance()
  const user = useUserStore() //创建仓库
  let valiForm = ref(null)
  const UserRules = ref({
    users: {
      rules: [{
        required: true,
        errorMessage: '用户名/邮箱不能为空!',
      }]
    },
    password: {
      rules: [{
        required: true,
        errorMessage: '密码不能为空'
      }, {
        //自定义规则
        validateFunction: function(rule, value, data, callback) {
          if (value.length < 6) {
            callback('至少输入6位数')
          }
          return true
        }
      }]
    }
  })

  function submit() {
    //如果验证成功
    valiForm.value.validate().then(res => {
      // console.log(res);
      //测试访问后端
      uni.request({
        url: `${instance.proxy.serverUrl}/api/login`,
        data: res,
        method: 'POST',
        success: (data) => {
          // console.log('success', data);
          if (data.data.code == 200) {
            // info.token = data.data.token //保存token
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            })
            info.password = ''
            info.users = ''
            //数据缓存到本地存储
            user.userinfo = data.data.data
            user.token = data.data.token

            setTimeout(() => { //三秒后跳转到首页
              uni.navigateTo({
                url: '/pages/home/home'
              })
            }, 3000)
          } else {
            uni.showToast({
              title: data.data.message,
              icon: 'error'
            })
          }

        }
      })
    }).catch(err => {
      uni.showToast({
        title: '上述信息输入有误',
        icon: 'error'
      })
    })
  }

  //前往注册页面
  function gotoRegister() {
    uni.navigateTo({
      url: "/pages/register/register"
    })
  }
  onLoad((e) => {
    if (e != null) {
      info.users = e.name
    }
    valiForm.value = instance.refs.valiForm
  })
</script>

<style lang="scss" scoped>
  @import '@/assets/css/top.scss';

  .login {
    height: 1240rpx;
    position: relative;
    // background: url('../../assets/images/common/VCG211285755496.gif');
    background-image: linear-gradient(rgb(237, 252, 255), rgb(232, 223, 167) 80%);

    .top {
      .right {
        position: absolute;
        right: 20rpx;
        font-size: 32rpx;
        color: var(--text-color);
        font-weight: 700;
      }
    }

    .logo {
      margin-top: 30rpx;
      align-items: center;
      display: flex;
      flex-direction: column;

      span:nth-child(2) {
        font-size: 36rpx;
        color: var(--text-color);
      }

      span:nth-child(3) {
        font-size: 28rpx;
        color: var(--text-color-grey);
      }
    }

    .data {
      margin: 0 auto;
      margin-top: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .uni-forms {
        padding: 40rpx 80rpx;
      }

    }
  }
</style>
